<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,button,input{
            padding:0;
            margin:0;
        }
        textarea{
            resize:none;
            width: 300px;
            height: 300px;
            font:16px/30px microsoft yahei;
            vertical-align:top;
        }
        button{
            width: 80px;
            height: 30px;
            font:16px/30px microsoft yahei;
        }
    </style>
</head>
<body>
<textarea> </textarea><button>改变颜色</button>
<p></p>
<script>
    var inp=document.getElementsByTagName("textarea")[0];
    var btn=document.getElementsByTagName("button")[0];
    var P=document.getElementsByTagName("p")[0];
    var arr=["red","blue","yellow","pink","lightblue"];
    btn.onclick=function(){
        var stn="";
        var str=inp.value;
        var array=str.split('');
        console.log(array);
        for(var i=0;i<array.length;i++){
            //方法一
//            stn+="<span>"+array[i]+"</span>";
            //方法二
            stn=array.join("</span><span>");
        }
        P.innerHTML="<span>"+stn+"</span>";
        var Span=document.getElementsByTagName("span");
        for(var j=0;j<Span.length;j++){
            Span[j].style.color=arr[j%5];
        }
    }
</script>
</body>
</html>